<template>
    <div>
        <homeheader></homeheader>
        <homeswiper :list='swiperList'></homeswiper>
        <homeicons :iconList='iconList'></homeicons>
        <recomment :recommendList='recommendList'></recomment>
        <homeweekend :weekendList='weekendList'></homeweekend>
    </div>
  </template>
  
  <script>
  import homeheader from './components/header'
  import homeswiper from './components/swiper'
  import homeicons from './components/icons'
  import recomment from './components/recomment'
  import homeweekend from './components/weekend'
  import axios from 'axios'
  import {mapState} from 'vuex'
  export default {
    name: 'home',
    components:{
      homeheader,
      homeswiper,
      homeicons,
      recomment,
      homeweekend
    },
    data(){
       return {
         //city:'',
         lastcity:'',//临时缓冲项
         swiperList:[],
         iconList:[],
         recommendList:[],
         weekendList:[]
       }
    },
    computed:{
      ...mapState(['city'])
    },
    methods:{
      gethomeinfo(){
        axios.get('/api/index.json?city='+this.city)//此处的city应该是vuex里面存储的数据
          .then(this.gethomeinfosucc)
      },                                                                                                                                                          
      gethomeinfosucc(res){var res=res.data
        if(res.ret&&res.data){
          const data=res.data
          //this.city=data.city
          this.swiperList=data.swiperList
          this.iconList=data.iconList
          this.recommendList=data.recommendList
          this.weekendList=data.weekendList
        }
      }
    },
    mounted (){//每次切换到首页，该组件就会被重新渲染，执行ajax获取数据
      this.lastcity=this.city
      this.gethomeinfo()
    },

    /*,
    activated(){//使用keep-alive，页面重新显示的时候，会产生activated生命周期
       if(this.lastcity !== this.city) {
         this.lastcity=this.city
         gethomeinfo()//!!!!!!!!!!!!!!!!!!此处写错了
       }
    }*/
    activated(){
      if(this.lastcity!==this.city){
        this.lastcity=this.city
        this.gethomeinfo()//两次城市不相等则重新执行一次ajax请求
      }
    }
  }
  </script>
 
  <style>
 
  </style>
  